<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>AI Crawler Assistant</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div class="container">
    <h1>🤖 AI Crawler Assistant</h1>
    
    <!-- 平台状态 -->
    <div class="section">
      <h2>平台状态</h2>
      <div class="platform-list">
        <div class="platform-item" id="deepseek-status">
          <span class="platform-name">DeepSeek</span>
          <span class="status-indicator" data-status="unknown">未知</span>
        </div>
        <div class="platform-item" id="yuanbao-status">
          <span class="platform-name">元宝</span>
          <span class="status-indicator" data-status="unknown">未知</span>
        </div>
        <div class="platform-item" id="doubao-status">
          <span class="platform-name">豆包</span>
          <span class="status-indicator" data-status="unknown">未知</span>
        </div>
      </div>
    </div>

    <!-- 快速发送 -->
    <div class="section">
      <h2>快速发送</h2>
      <textarea id="quick-message" placeholder="输入要发送的消息..." rows="4"></textarea>
      <div class="platform-select">
        <label>
          <input type="checkbox" value="deepseek" checked> DeepSeek
        </label>
        <label>
          <input type="checkbox" value="yuanbao" checked> 元宝
        </label>
        <label>
          <input type="checkbox" value="doubao" checked> 豆包
        </label>
      </div>
      <button id="send-btn" class="btn btn-primary">发送到所有平台</button>
    </div>

    <!-- 批量任务 -->
    <div class="section">
      <h2>批量任务</h2>
      <textarea id="batch-messages" placeholder="每行一个问题..." rows="6"></textarea>
      <button id="batch-send-btn" class="btn btn-secondary">批量发送</button>
      <div id="batch-progress" style="display: none;">
        <div class="progress-bar">
          <div class="progress-fill" id="progress-fill"></div>
        </div>
        <span id="progress-text">0/0</span>
      </div>
    </div>

    <!-- 采集任务 ⭐ 新增 -->
    <div class="section">
      <h2>📋 采集任务</h2>
      <div class="task-info">
        <div class="task-item">
          <span>待执行任务:</span>
          <span id="pending-task-count" class="badge">0</span>
        </div>
      </div>
      
      <!-- 任务列表 ⭐ 新增 -->
      <div id="task-list-container" style="display: none;">
        <div class="task-list" id="task-list">
          <!-- 任务列表将动态加载 -->
        </div>
      </div>
      
      <!-- 当前选中任务信息 -->
      <div class="selected-task-info" style="margin-top: 12px;">
        <div class="task-item">
          <span>选中任务:</span>
          <span id="selected-task-name" style="color: #1a73e8; font-weight: 500;">未选择</span>
        </div>
        <div class="task-item">
          <span>问句数量:</span>
          <span id="selected-task-questions">0</span>
        </div>
        <div class="task-item">
          <span>平台数量:</span>
          <span id="selected-task-platforms">0</span>
        </div>
      </div>
      
      <div id="task-progress-bar" style="display: none; margin-top: 12px;">
        <div class="progress-bar">
          <div class="progress-fill" id="task-progress-fill"></div>
        </div>
        <div class="task-item" style="margin-top: 4px;">
          <span>执行进度:</span>
          <span id="task-progress-text">0/0</span>
        </div>
      </div>
      
      <div class="button-group" style="margin-top: 12px;">
        <button id="refresh-tasks-btn" class="btn btn-primary">🔄 刷新任务</button>
        <button id="execute-task-btn" class="btn btn-success" disabled>▶️ 执行任务</button>
      </div>
      <small style="color: #5f6368; font-size: 11px; margin-top: 8px; display: block;">
        💡 提示：刷新任务后，从列表中选择一个任务，然后点击"执行任务"
      </small>
    </div>

    <!-- 设置 -->
    <div class="section">
      <h2>设置</h2>
      <div class="setting-item">
        <label>后端服务地址:</label>
        <input type="text" id="backend-url" value="http://localhost:8080" />
      </div>
      <div class="setting-item">
        <label>
          <input type="checkbox" id="auto-collect" checked> 自动采集数据
        </label>
      </div>
      <div class="setting-item">
        <label>
          <input type="checkbox" id="sync-to-backend" checked> 同步到后端
        </label>
      </div>
      <div class="setting-item">
        <label>等待稳定时间（秒）:</label>
        <input type="number" id="stable-wait-time" value="2" min="1" max="10" 
               style="width: 80px;" />
        <small style="color: #5f6368; font-size: 11px; margin-left: 8px;">
          内容不变多久后采集（建议2-3秒）
        </small>
      </div>
      <div class="setting-item">
        <label>多平台切换延迟（秒）:</label>
        <input type="number" id="platform-switch-delay" value="8" min="3" max="20" 
               style="width: 80px;" />
        <small style="color: #5f6368; font-size: 11px; margin-left: 8px;">
          切换平台前等待采集完成（建议6-10秒）
        </small>
      </div>
      <button id="save-settings-btn" class="btn btn-secondary">保存设置</button>
    </div>

    <!-- 统计信息 -->
    <div class="section">
      <h2>统计信息</h2>
      <div class="stats">
        <div class="stat-item">
          <span class="stat-label">今日采集:</span>
          <span class="stat-value" id="today-count">0</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">总计采集:</span>
          <span class="stat-value" id="total-count">0</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">缓存数据:</span>
          <span class="stat-value" id="cache-count">0</span>
        </div>
      </div>
      <button id="view-data-btn" class="btn btn-secondary">查看采集数据</button>
      <button id="comparison-btn" class="btn btn-secondary">📊 多平台对比</button>
      <div class="export-buttons">
        <button id="export-json-btn" class="btn btn-secondary">导出JSON</button>
        <button id="export-csv-btn" class="btn btn-secondary">导出CSV</button>
        <button id="export-html-btn" class="btn btn-secondary">导出HTML</button>
      </div>
      <button id="clear-cache-btn" class="btn btn-danger">清除缓存</button>
    </div>

    <!-- 采集数据查看区域 -->
    <div class="section" id="data-viewer" style="display: none;">
      <h2>📊 最近采集的数据</h2>
      <div id="data-list" class="data-list">
        <!-- 数据将动态加载到这里 -->
      </div>
    </div>

    <!-- 多平台对比区域 -->
    <div class="section" id="comparison-viewer" style="display: none;">
      <h2>📊 多平台对比视图</h2>
      <div class="comparison-controls">
        <label>
          <input type="checkbox" id="show-only-multi" checked> 只显示多平台数据
        </label>
        <button id="refresh-comparison-btn" class="btn-small">刷新</button>
      </div>
      <div id="comparison-list" class="comparison-list">
        <!-- 对比数据将动态加载到这里 -->
      </div>
    </div>
  </div>

  <script src="popup.js"></script>
</body>
</html>

